<template>
    <div>
        <div :class="showCode">
            <highlightjs :code="code" language="JavaScript" />
        </div>
        <div class="show-code" @click="showCode = showCode === 'container-show' ? 'container-hide' : 'container-show'">
            {{ showText }}
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'

const props = defineProps({
    comp: {
        type: String
    },
    demo: {
        type: String
    }
})

const showText = computed(() => {
    return showCode.value === 'container-show' ? '隐藏代码' : '显示代码'
})

const code = ref('')

async function getCode() {
    //console.log(props.comp, props.demo);
    //code.value = (await import(`../../packages/${props.compName}/demo/${props.demoName}.vue?raw`)).default
    code.value = (await import(`../../packages/${props.comp}/demo/${props.demo}.vue?raw`)).default
}

const showCode = ref('container-hide')

onMounted(() => {
    getCode()
})
</script>

<style scoped lang="scss">
.container-show {
    margin-top: 1rem;
    width: 100%;
    border-radius: 0.2rem;
    //box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
}

.container-hide {
    margin-top: 1rem;
    width: 100%;
    display: none;
}

.show-code {
    width: 100%;
    text-align: center;
    cursor: pointer;
    font-size: 0.8rem;
    color: black;
    border-radius: 0.2rem;
    line-height: 1.5rem;
    height: 1.5rem;
    margin: 1rem 0;
    transition: box-shadow 0.5s, color 0.5s;

    &:hover {
        //box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.08);
        color: #66d476;
    }
}
</style>
